USDA Government Redesign Project
TIMELINE
5 Weeks
ROLE
UX Designer
TOOLS
Figma, Photoshop CS5
The United States Department of Agriculture provides leadership on food, agriculture, and natural resources.
Preface
WHAT IS THE USDA?
The U.S Department of Agriculture (USDA) is the federal agency that proposes programs and implements policies and regulations related to American farming, forestry, ranching, food quality, and nutrition.
Research
By creating a proto persona of a typical user of the USDA website, it provides us with a realistic representation of the target users, ensuring that design decisions are aligned with user's needs, goals and behaviors.
Website Analysis
Conducting a website analysis of the current website is crucial for informing the redesign process and identifying possible opportunities for improvement. In the image below, you can see some of the comments I provided for both the Desktop and Mobile version of the website.
Most of my analysis concluded that the overall theme of the website could be improved with a more cohesive color palette and revised navigation while removing unnecessary content that doesn't support the USDA's mission.
Guerrilla Usability Test
Next I began to conduct 5 usability tests aimed as assessing the websites user-friendliness, particularly focusing on its accessibility to first time users. The objective was to pinpoint any potential usability challenges encountered by participants as they attempted to navigate the site and accomplish specific tasks.
Mood board and Inspiration
Our next step was to begin gathering inspiration, including UI Samples and inspiration. This establishes the visual direction, while also setting the atmosphere of the design. I noticed that I was drawn towards green and earthy elements as it fit in with the nature of the USDA website.
Style Guide
Below are some examples taken from the Style Guide that were used during the design process of the website. Ensuring consistency and clear direction to help maintain a cohesive look and feel throughout the user interface. I aimed to create in a style direction that could be described as clean, fresh, organic, and inspiring.
Sitemap
After categorizing the content, I began to start to visualize the information architecture and its usability. I then crafted wireframes and prototypes, mapping out the user journey to optimize functionality.
Wireframes
After completing the sitemap, I started to begin the wireframing process for both Desktop and Mobile, making sure I was included everything that was important for the user to see.
Header/Footer Navigation
I then went ahead and started to create mockups for what the header and footer navigation might look like on Desktop (pictured below) keeping information easy on the eyes as well as organized.
High Fidelity Prototypes and Iterations
With wireframes and navigation headers and footers complete, I wanted to start on the process of working on high fidelity. Initially, I noticed myself gravitating towards replicating the original government agency's design for a sense of familiarity. (left) However, I later opted to introduce contrasting elements and adopt a sleeker aesthetic to infuse visual interest into the design (right).
Mobile Navigation Prototypes and Iterations
I also wanted to include the different stages and iterations for the mobile navigation as well, pictured below.
High Fidelity Comps - Mobile and Desktop
Usability Testing and Feedback
After finalizing my high-fidelity prototypes, I enlisted 7 users to conduct prototype testing. They were tasked with two objectives: locating information on organic farm certification and finding the careers page. All users successfully completed these tasks. Feedback from the testing session indicated that this version of the interface was more intuitive compared to earlier guerrilla testing using the original homepage and navigation.
One user noted difficulty with the language used, suggesting it might be more intuitive for farmers. Another user habitually sought navigation links at the bottom of the page, reflecting on the absence of this option during testing. Despite being instructed to use only upper navigation, this user instinctively scrolled to the bottom to find the careers page, citing past experience.
Users praised the cleanliness and functionality of the mobile menu, and they found the organization of the information on the page commendable. They acknowledged the density of information, acknowledging the limited control over such content. While aesthetic feedback was absent, I opted to refine both the desktop and mobile navigation by unifying them to a single color. Additionally, I removed the search bar from the mobile view since it was already accessible in the mobile pull-out menu.
Final Thoughts and Next Steps
Always be iterating and improving. While I take pride in completing my first full desktop and mobile prototype - especially given time restrictions. I feel that there is more that I can improve and iterate upon. Font sizing and spacing will be my focus for upcoming projects as they have emerged as areas where I tend to encounter challenges.
This project has really highlighted the importance of meticulous attention to detail and the nature of design work. It has reinforced my understanding that successful design goes beyond just aesthetics, it must also prioritize usability and functionality to effectively meet user needs and business objectives.
